<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <el-button type="success" icon="el-icon-download" size="small" @click="exportData">导出</el-button>
        <el-button type="success" icon="el-icon-printer" size="small" @click="printEvent">打印</el-button>
        <vxe-input style="float: right;" v-model.trim.lazy="filterName" type="search" placeholder="快捷检索"
          @keyup="searchEvent"></vxe-input>
      </template>
    </vxe-toolbar>
    <vxe-table resizable ref="xTable" show-overflow border max-height="600" stripe highlight-hover-row
      highlight-current-row show-footer :footer-method="footerMethod" :data="defaultDataList" keep-source
      :edit-config="{trigger: 'click', mode: 'cell',showStatus: true, icon: 'fa fa-pencil-square-o'}">
      <vxe-table-column field="titleName" title="标题" sortable min-width="80"></vxe-table-column>
      <vxe-table-column field="subtitleName" title="副标题" sortable min-width="130"></vxe-table-column>
      <vxe-table-column field="selfAssessScore" title="自评分数" sortable></vxe-table-column>
      <vxe-table-column field="selfAssessMemo" title="自评备注" sortable></vxe-table-column>
      <vxe-table-column field="reAssessScore" title="市局初审" sortable
        :edit-render="{name: 'input',placeholder: '点击输入', attrs: {type: 'text'}}"></vxe-table-column>
      <!-- <vxe-table-column field="reAssessMemo" title="市局复评备注" sortable
        :edit-render="{name: 'input',placeholder: '点击输入', attrs: {type: 'text'}}"></vxe-table-column> -->
      <vxe-table-column field="finalAssessScore" title="省局复核" sortable
        :edit-render="{name: 'input',placeholder: '点击输入', attrs: {type: 'text'}}"></vxe-table-column>

      <vxe-table-column field="finalAssessMemo" title="省局复核备注" sortable
        :edit-render="{name: 'input',placeholder: '点击输入', attrs: {type: 'text'}}"></vxe-table-column>
      <vxe-table-column field="" title="操作" sortable>
        <template #default="{ row }">
          <el-link @click="saveEvent(row)" size="mini" type="primary">保存<i style="font-size: 15px;"
              class="iconfont icon-save"></i></el-link>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
  import { save4centerMemo } from '@/api/statistics.js'
  export default {
    props: ['dataList', 'footerArr', 'currentRow'],
    data() {
      return {
        filterName: '',
        searchProps: [],
        defaultDataList: []
      }
    },
    watch: {
      dataList(val) {
        this.defaultDataList = this.dataList
        // console.log(this.defaultDataList, "888888888888");
      },
    },
    methods: {
      saveEvent(row, field) {
        const $table = this.$refs.xTable
        // if ($table.isUpdateByRow(row)) {
        row.loading = true
        this.submitSave(row).then(() => {
          // 局部保存，并将行数据恢复到初始状态（如果 record 为空则不改动行数据，只恢复状态）
          $table.reloadRow(row, null, field)
          this.$XModal.message({ content: '保存成功！', status: 'success' })
          this.$emit('saveSuccess')
          row.loading = false
        })
        // } else {
        //   this.$XModal.message({ content: '数据未改动！', status: 'info' })
        // }
      },
      submitSave(row) {
        return new Promise(resolve => {
          if (!row.selfAssessScore) {
            this.$message.warning('不能给未自评的机构复评和统评')
            return
          }
          let data = {
            baseDataId: row.baseDataId,
            reAssessMemo: row.reAssessMemo,
            finalAssessMemo: row.finalAssessMemo,
            finalAssessScore: row.finalAssessScore,
            reAssessScore: row.reAssessScore,
          }
          save4centerMemo(data).then(res => {
            if (res.code === 200) {
              resolve()
            } else {
              this.$message.error('保存失败！')
            }
          })
        })
      },
      exportData() {
        this.$refs.xTable.exportData({
          filename: this.currentRow.orgName + '基地评分表',
          type: 'csv',
          data: this.dataList
        })
      },
      printEvent() {
        let topHtml = '<h2>' + this.currentRow.orgName + '基地评分表</h2>'
        this.$refs.xTable.print({
          sheetName: this.currentRow.orgName + '基地评分表',
          beforePrintMethod: ({
            content
          }) => {
            return topHtml + content
          }
        })
      },
      searchEvent() {
        const filterName = this.$XEUtils.toValueString(this.filterName).trim().toLowerCase()
        if (filterName) {
          const filterRE = new RegExp(filterName, 'gi')
          const searchProps = this.searchProps
          const rest = this.dataList.filter(item => searchProps.some(key => this.$XEUtils.toValueString(item[
            key]).toLowerCase().indexOf(filterName) > -1))
          this.defaultDataList = rest.map(row => {
            const item = Object.assign({}, row)
            searchProps.forEach(key => {
              item[key] = this.$XEUtils.toValueString(item[key]).replace(filterRE, match => match)
            })
            return item
          })
        } else {
          this.defaultDataList = this.dataList
        }
      },
      footerMethod() {
        let arr = [
          this.footerArr.titleName,
          this.footerArr.subtitleName,
          this.footerArr.selfAssessScore,
          this.footerArr.reAssessScore,
          this.footerArr.finalAssessScore,
          this.footerArr.selfAssessMemo,
          this.footerArr.reAssessMemo,
          this.footerArr.finalAssessMemo,
        ]
        this.searchProps = [
          'titleName',
          'subtitleName',
          'selfAssessScore',
          'reAssessScore',
          'finalAssessScore',
          'selfAssessMemo',
          'reAssessMemo',
          'finalAssessMemo',
        ]
        return [arr]
      }
    }
  }
</script>

<style scoped>

</style>
